<template>
  <div class="app-container">
    <a-card size="small" :bordered="false" class="box-card">
      <a-row justify="center" align="middle">
        <a-col flex="100px">
          <div class="titleHeader" style="font-weight: bold">数据分析</div>
        </a-col>
        <a-col flex="auto">
          <div class="title_content">
            <span>统计周期：</span>
            <span><a-range-picker v-model:value="value1" /></span>
            <span>自定义</span>
            <span>最近7天</span>
            <span>最近14天</span>
          </div>
        </a-col>
        <a-col flex="100px">
          <a-button
            size="middle"
            class="search_Button confirm"
            type="primary"
            :icon="h(ExportOutlined)"
            @click="exportDate"
            >导出数据</a-button
          >
        </a-col>
      </a-row>
      <div class="marginTop12 dataOverview">
        <a-row justify="center" algin="middle">
          <a-col flex="auto">
            <div class="a_col_date">
              <BarChartOutlined />
              <div style="color: #303133; margin-left: 6px">下载量总览</div>
            </div>
          </a-col>
          <a-col flex="70px">
            <a-button
              size="middle"
              class="search_Button confirm"
              type="primary"
              :icon="h(ExportOutlined)"
              @click="exportDate"
              >导出数据</a-button
            >
          </a-col>
        </a-row>
      </div>
      <a-row justify="center" algin="middle">
        <a-col flex="auto">
          <!-- <div ref="chartRef" style="width: 100%; height: 400px;"></div> -->
          <div class="echarts-chart" ref="chartRef"></div>
        </a-col>
      </a-row>
    </a-card>
    <a-card size="small" :bordered="false" class="box-card marginTop12">
      <template #title>
        <header class="titleHeader">
          <div class="titleLeft">
            数据总览
            <ExclamationCircleOutlined />
          </div>
        </header>
      </template>
      <div class="seach-content">
        <a-row>
          <a-col :xs="7" :xl="6" class="search_content">
            <div class="search_lable">游戏ID</div>
            <a-input
              size="small"
              v-model:value="id"
              allowClear
              placeholder="请输入游戏ID"
              class="search_input"
            />
          </a-col>
          <a-col :xs="7" :xl="6" class="search_content">
            <div class="search_lable">游戏名称</div>
            <a-input
              size="small"
              v-model:value="name"
              allowClear
              type="text"
              placeholder="请输入游戏名称"
              class="search_input"
            />
          </a-col>
          <a-col :xs="7" :xl="6" class="search_content">
            <div class="search_lable">日期选择</div>
            <a-time-range-picker class="search_input" allowClear>
            </a-time-range-picker>
          </a-col>
          <a-col :xs="3" :xl="6" class="search_content">
            <a-button
              class="search_Button confirm"
              type="primary"
              @click="search"
              >确定</a-button
            >
            <a-button
              class="search_Button search_Button_reset button_cancel_hover"
              @click="reset"
              >重置</a-button
            >
          </a-col>
        </a-row>
      </div>
      <div class="margin20 dataOverview">
        <a-row>
          <a-col flex="auto">
            <div class="a_col_date">
              <SvgIcon name="date" color="#4CC87E" width="21px" height="21px" />
              <span>数据总览</span>
            </div>
          </a-col>
          <a-col flex="70px">
            <a-button
              size="middle"
              class="search_Button confirm"
              type="primary"
              :icon="h(ExportOutlined)"
              @click="exportDate"
              >导出数据</a-button
            >
          </a-col>
        </a-row>
      </div>
      <div class="table_content">
        <a-table
          :columns="columns"
          :data-source="data"
          @resizeColumn="handleResizeColumn"
          :row-class-name="
            (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
          "
          :locale="localeObj"
        >
          <template #headerCell="{ column }">
            <template v-if="column.key === 'name'">
              <span>
                <smile-outlined />
                Name
              </span>
            </template>
          </template>
          <template #bodyCell="{ column, record }">
            <!-- <template v-if="column.key === 'name'">
              <a>
                {{ record.name }}
              </a>
            </template> -->
            <div v-if="column.key === 'status'" class="geme_status">
              <span v-if="record.status === 1" class="geme_status_gray"
                >待上线</span
              >
              <span v-else-if="record.status === 3" class="geme_status_color"
                >已上线</span
              >
              <span v-else-if="record.status === 4" class="geme_status_out"
                >已下架</span
              >
              <span v-else-if="record.status === 2">-</span>
            </div>
            <div v-if="column.key === 'onlineTime'">
              <span v-if="record.onlineTime">{{ record.onlineTime }}</span>
              <span v-else>-</span>
            </div>
            <template v-if="column.key === 'tags'">
              <a-tag
                v-if="record.status === 1"
                :bordered="false"
                color="default"
                >未发布</a-tag
              >
              <a-tag
                v-else-if="record.status === 3"
                :bordered="false"
                color="green"
                >审核完成</a-tag
              >
              <a-tag
                v-else-if="record.status === 4"
                :bordered="false"
                color="error"
                >审核失败</a-tag
              >
              <a-tag
                v-else-if="record.status === 2"
                :bordered="false"
                color="warning"
                >审核中</a-tag
              >
            </template>
            <template v-else-if="column.key === 'action'">
              <span class="action">
                <a-button
                  class="action"
                  value="small"
                  type="text"
                  @click="doAction('add', record)"
                  >添加安装包</a-button
                >
                <!-- <a-divider type="vertical" /> -->
                <a-button class="action" size="small" type="text"
                  >还原</a-button
                >
                <!-- <a-divider type="vertical" /> -->
                <a-button class="action" size="small" type="text"
                  >剩余时间</a-button
                >
                <!-- <a-divider type="vertical" /> -->
                <a-button class="action" size="small" type="text"
                  >查看</a-button
                >
                <!-- <a-divider type="vertical" /> -->
                <a-button class="action" size="small" type="text"
                  >失败原因</a-button
                >
                <!-- <a-divider type="vertical" /> -->
                <a-button
                  class="action"
                  size="small"
                  type="text"
                  @click="doAction('delete', record)"
                  >删除</a-button
                >
                <!-- <a-divider type="vertical" /> -->
                <a-button
                  class="action"
                  size="small"
                  type="text"
                  :loading="state.loading"
                  @click="doAction('update', record)"
                  >更新</a-button
                >
                <!-- <a-divider type="vertical" /> -->
                <a-button
                  class="action"
                  size="small"
                  type="text"
                  @click="doAction('applyForRemoval', record)"
                  >申请下架</a-button
                >
                <!-- <a-divider type="vertical" /> -->
                <a-button size="small" type="text" class="action"
                  >撤回
                  <!-- <down-outlined /> -->
                </a-button>
              </span>
            </template>
          </template>
          <!-- <a-config-provider >
            <template #emptyText>
              <div style="text-align: center">
                <img src="../../assets/images/img-default @2x.png" alt="">
                <p>暂无数据</p>
              </div>
            </template>
          </a-config-provider> -->
        </a-table>
      </div>
    </a-card>
    <a-modal
      v-model:open="applyForRemovalModal"
      class="applyForRemovalModal"
      style="
        /* background: #FFFFFF; */
        padding: 0 25px;
        height: 635px;
        width: 1200px;
        box-shadow: 1px 3 8px 2px rgba(0, 0, 0, 0.08);
        border-radius: 2px 2px 2px 2px;
      "
      title="申请下架"
      @ok="handleOk"
    >
      <p>
        本开放平台支持开发者自行申请下架应用，如应用出现问题，可根据实际情况提交下架申请。
      </p>
      <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
        <a-form-item label="下架方式" name="way">
          <a-radio-group v-model:value="formState.way">
            <a-radio value="1">仅下架该版本</a-radio>
            <a-radio value="2">下架该游戏</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="原因描述" name="cause">
          <a-textarea
            v-model:value="formState.cause"
            placeholder="请具体描述下架原因（如：①应用不再维护 ②应用更换包名 ③上架版本出现BUG，需暂时下架修复 ④上架版本出现BUG，需回退版本 ⑤其他原因）"
          />
        </a-form-item>
        <a-form-item label="上传截图(格式必须为JPG或PNG)">
          <a-upload
            v-model:fileList="formState.screenshot"
            list-type="picture-card"
            :max-count="1"
          >
            <div v-if="formState.screenshot.length < 1">
              <PlusOutlined
                :style="{ fontSize: '32px', color: 'rgba(222, 222, 222, 1)' }"
              />
            </div>
          </a-upload>
        </a-form-item>
        <div class="form_tips">
          <i class="tips">
            <img
              src="../../assets/icon/icon.png"
              alt=""
              class="imgs"
            />温馨提示</i
          ><br />
          <i>① 提交成功后，游戏自动下架，无需审核等待。</i><br />
          <i
            >②
            若线上版本存在短期无法解决的严重BUG，但旧版本可正常使用，建议申请[仅下架该版本]，系统将自动回退到旧版本，确保新用户能下载到可用的版本。同时，建议开发者及时更新，保证老用户不再因为BUG影响正常使用。
          </i>
        </div>
      </a-form>
      <template #footer>
        <a-form-item style="text-align: center">
          <a-button
            htmlType="submit"
            style="
              margin-right: 16px;
              background-color: rgba(76, 200, 126, 1);
              border-radius: 2px 2px 2px 2px;
            "
            type="primary"
            @click="handleOk"
            >提 交</a-button
          >
          <a-button
            class="button_cancel_hover"
            style="margin-left: 8px; border-radius: 2px 2px 2px 2px"
            @click="handleCancel"
            >取 消</a-button
          >
        </a-form-item>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import {
  reactive,
  ref,
  toRaw,
  h,
  onMounted,
  onUnmounted,
  onBeforeUnmount,
  watchEffect,
  nextTick,
} from "vue";
// import LeTodoList from "@/components/tolist/index.vue";
import {
  ExclamationCircleOutlined,
  PlusOutlined,
  ExportOutlined,
  BarChartOutlined,
} from "@ant-design/icons-vue";
import { createVNode } from "vue";
import { Modal, Empty } from "ant-design-vue";
import SvgIcon from "@/components/svgIcon.vue";
// VChart

const chartRef = ref(null);
let chartInstance = null;
onMounted(() => {
  nextTick(() => {
    const chartDom = chartRef.value;
    if (chartDom) {
      chartInstance = echarts.init(chartRef.value);
      chartInstance.setOption(getChartOption());
    }
  });

  window.addEventListener("resize", handleResize);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
  if (chartInstance != null) {
    chartInstance.dispose();
  }
});
watchEffect(() => {
  if (chartInstance) {
    chartInstance.resize();
  }
});
const getChartOption = () => {
  return {
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "06/29",
        "06/30",
        "07/01",
        "07/02",
        "07/03",
        "07/04",
        "07/05",
        "07/06",
        "07/07",
      ],
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} 次",
      },
    },
    series: [
      {
        name: "下载量",
        type: "line",
        smooth: true,
        data: [1000, 800, 600, 1500, 1800, 2000, 1200, 1000, 1500],
      },
    ],
  };
};
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};
// search
const id = ref("");
const name = ref("");
const packName = ref("");
const auditStatus = ref([]);
const selectTable = ref([
  {
    value: "jack",
    label: "Jack",
  },
  {
    value: "lucy",
    label: "Lucy",
  },
  {
    value: "disabled",
    label: "Disabled",
    disabled: true,
  },
  {
    value: "yiminghe",
    label: "Yiminghe",
  },
]);
const search = () => {
  console.log(id.value, name.value, packName.value, auditStatus.value, 11111);
};
const reset = () => {
  (id.value = ""),
    (name.value = ""),
    (packName.value = ""),
    (auditStatus.value = []);
};
const handleChange = (value) => {
  console.log(`selected ${value}`);
  search();
};
// 导出数据
const exportDate = () => {
  console.log(111, "exportDate");
};

// 表格
// const data = [
//   {
//     key: '1',
//     name: 'John Brown',
//     age: 32,
//     address: 'New York No. 1 Lake Park',
//     tags: ['nice', 'developer'],
//     status:1
//   },
//   {
//     key: '2',
//     name: 'Jim Green',
//     age: 42,
//     address: 'London No. 1 Lake Park',
//     tags: ['loser'],
//     status:2,
//     onlineTime:'2023/07/10 08:00:00'
//   },
//   {
//     key: '3',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//     status:3
//   },
//   {
//     key: '4',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//     status:4
//   },
//   {
//     key: '4',
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//     tags: ['cool', 'teacher'],
//     status:4
//   },
// ];
const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
    id: i,
  });
}
// const columns = ref([
// {
//     title: '序号',
//     dataIndex: 'key',
//     render: (value, record, index) => {
//       return index + 1; // 使用行号
//     },
//     width: 80,
//   },
//   {
//     dataIndex: 'name',
//     key: 'name',
//     resizable: true,
//     width: 150,
//     align:'center'
//   },
//   {
//     title: 'Age',
//     dataIndex: 'age',
//     key: 'age',
//     resizable: true,
//     width: 100,
//     minWidth: 100,
//     maxWidth: 200,
//     align:'center'
//   },
//   {
//     title: 'Address',
//     dataIndex: 'address',
//     key: 'address',
//     align:'center'
//   },
//   {
//     title: 'Tags',
//     key: 'tags',
//     dataIndex: 'tags',
//     align:'center'
//   },
//   {
//     title: '上线时间',
//     key: 'onlineTime',
//     dataIndex: 'onlineTime',
//     align:'center',
//     width: 180,
//   },
//   {
//     title: '游戏状态',
//     key: 'status',
//     dataIndex: 'status',
//     align:'center',
//     width: 100,
//   },
//   {
//     title: 'Action',
//     key: 'action',
//     align:'center'
//   },
// ]);
const columns = [
  {
    title: "Full Name",
    width: 100,
    dataIndex: "name",
    key: "name",
  },
  {
    title: "Age",
    width: 100,
    dataIndex: "age",
    key: "age",
  },
  {
    title: "Column 1",
    dataIndex: "address",
    key: "1",
    width: 100,
  },
  {
    title: "Column 2",
    dataIndex: "address",
    key: "2",
    width: 100,
  },
  {
    title: "Column 3",
    dataIndex: "address",
    key: "3",
    width: 100,
  },
  {
    title: "Column 4",
    dataIndex: "address",
    key: "4",
    width: 100,
  },
  {
    title: "Column 5",
    dataIndex: "address",
    key: "5",
    width: 100,
  },
].map((item) => ({
  ...item,
  align: "center", // 居中
  resizable: true, // 可否伸缩
  maxWidth: 200, // 可伸缩最大宽度
  minWidth: 75, // 可伸缩最小宽度
  sorter: true, // 可否排序
}));
function handleResizeColumn(w, col) {
  col.width = w;
}
const state = reactive({
  // selectedRowKeys: [],
  // Check here to configure the default column
  loading: false,
});
const applyForRemovalModal = ref(false);
const handleOk = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log("values", formState, toRaw(formState));
      applyForRemovalModal.value = false;
      // formRef.value.resetFields();
      // formState.screenshot =[]
    })
    .catch((error) => {
      console.log("error", error);
    });
  console.log(111, "addM");
};
const handleCancel = () => {
  applyForRemovalModal.value = false;
  formRef.value.resetFields();
};
const doAction = (e, record) => {
  console.log(111, "start");
  console.log(e, "e");
  console.log(record, "record");
  if (e === "applyForRemoval") {
    console.log(1111, "applyForRemoval");
    applyForRemovalModal.value = true;
    // formRef.value.resetFields();
    // formState.screenshot =[]
  } else if (e === "update") {
    state.loading = true;
    // ajax request after empty completing
    setTimeout(() => {
      state.loading = false;
      // state.selectedRowKeys = [];
    }, 1000);
  } else if (e === "delete") {
    Modal.confirm({
      title: "Are you sure delete this task?",
      icon: createVNode(ExclamationCircleOutlined),
      content: `Some descriptions + ${record.name}`,
      okText: "Yes",
      okType: "danger",
      cancelText: "No",
      onOk() {
        console.log("OK", record);
        formRef.value
          .validate()
          .then(() => {
            console.log("values", formState, toRaw(formState));
            applyForRemovalModal.value = false;
          })
          .catch((error) => {
            console.log("error", error);
          });
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  }
};
// modal 下架
const formRef = ref();
const formState = reactive({
  way: "",
  cause: "",
  screenshot: [],
});
const rules = {
  way: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  cause: [
    {
      required: true,
      message: "Please input activity form",
      trigger: "blur",
    },
  ],
};

// 分页
</script>
<style lang="less" scoped>
@import url("./test.less");
</style>
<style scoped>
.margin20 {
  margin-top: 20px;
}
.dataOverview {
  height: 32px;
  font-family: PingFang SC, PingFang SC;
  font-weight: bolder;
  font-size: 10px;
  color: #3c3c3c;
  line-height: 32px;
  margin-left: 20px;
}
.a_col_date {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: rgba(76, 200, 126, 1);
}
.wrapper {
  width: 100%;
  height: 100%;
}
.svg-container {
  /* vertical-align: middle; */
  /* display: inline-block; */
  width: 10px;
  height: 10px;
}
.echarts-chart {
  width: 100%;
  height: 400px; /* Adjust the height as needed */
}
</style>
